<template>
	<view>
		<view>
			<form>
				<view class="uni-form-item uni-column">
					<label class="title">标题</label>
					<input class="uni-input form-value-box" v-model="formData.title" name="title" focus placeholder="请输入标题" />
				</view>
				<view class="uni-form-item uni-column">
					<label class="title">联系人</label>
					<input class="uni-input form-value-box" v-model="formData.contactP" name="contactP" placeholder="请输入联系人" />
				</view>
				<view class="uni-form-item uni-column">
					<label class="title">联系方式</label>
					<input class="uni-input form-value-box" v-model="formData.contact" name="contact"  placeholder="请输入联系方式" />
				</view>
				<view class="uni-form-item uni-column">
					<label class="title">雇佣类型</label>
					<radio-group  class="form-value-box" @change="radioChange('employment_type',$event)" name="employment_type">
						<radio value="SHORT_TERM" /><text>短工</text>
						<radio value="LONG_TERM" /><text>长工</text>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<label class="title">结算方式</label>
					<radio-group class="form-value-box" @change="radioChange('settle_type',$event)" name="settle_type">
						<radio value="DAILY_SETTLE" /><text>日结</text>
						<radio value="MONTHLY_SETTLE" /><text>月结</text>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<label class="title">用工人数</label>
					<input class="uni-input form-value-box" name="employ_num" focus placeholder="请输入用工人数" v-model="formData.employ_num"/>
				</view>
				<view class="uni-form-item uni-column">
					<label class="title">工作内容及要求</label>
					<view class="uni-textarea form-value-box">
						<textarea v-model="formData.content" placeholder-style="color:#aab2bd" maxlength="1000" placeholder="请输入招工详细信息"  />
					</view>
				</view>
				<view class="uni-btn-v">
					<button @click="formSubmit()">发布</button>
				</view>
				<view class="uni-btn-v">
					<button style="background-color: #8b0000;" form-type="reset" @click="formReset()">重置</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref,reactive} from 'vue';
import { pushlishInfo } from '@/api/info/InfoDataController';
import { PublishFormData } from '@/entity/publish/PublishFormData';
	const formRole = ref<any>(null);
	const formData = reactive({
		title: "",
		contactP: "",
		contact: "",
		employment_type: "",
		settle_type: "",
		employ_num: "",
		content: "",
		avatar:"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
	});
	const uuid = ()=>{
		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*8|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(8);
    });

}
	const formSubmit = () => {
		console.log("表单提交")
		const data = new PublishFormData(formData.title,formData.contactP,formData.contact,
		formData.employment_type,formData.settle_type,formData.employ_num,formData.content,"微信用户_"+ uuid(),formData.avatar);
		pushlishInfo(data);
		uni.navigateTo({
			url: `/pages/publish/published-list?userId=`
		})
	}
	const formReset = () =>{
		console.log("表单重置")
		formData.title = "";
		formData.contactP = "";
		formData.contact= "";
		formData.employment_type ="";
		formData.settle_type = "";
		formData.employ_num = "";
		formData.content = "";
	}
	const radioChange = (name: string,e: any) => {
		console.log("单选触发")
		if(name === 'settle_type') {
			formData.settle_type = e.detail.value;
		}
		if(name === 'employment_type') {
			formData.employment_type = e.detail.value;
		}
	}
	
</script>

<style lang="scss">
	input::-webkit-input-placeholder {
        color: #aab2bd;
        font-size: 14rpx;
    }
	.uni-form-item .title {
			font-weight: bolder;
			font-size: 40rpx;
		}
	.uni-form-item {
		border-bottom: 1rpx solid #aab2bd ;
		padding: 20rpx 0;
		display: flex;
	}	
	button {
		width: 85%;
		border-radius: 8rpx;
		color: #f5f5f5;
		background-color: #4169e1;
	}
	.uni-textarea {
		margin-top: 5rpx;
		flex-direction: row;
		textarea {
			border-radius: 8rpx;
			min-width: 290rpx;
			border: 1rpx solid #aab2bd;
		}
	}
	.form-value-box {
		margin-left: 20rpx;
	}
	.uni-btn-v {
		margin:10rpx 0;
	}
</style>